import 'dart:convert';

import 'package:dio/dio.dart';
import 'package:enjoy_plus_hm/utils/http.dart';
import 'package:enjoy_plus_hm/utils/toast.dart';
import 'package:enjoy_plus_hm/utils/validate.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';

class HouseForm extends StatefulWidget {
  HouseForm({super.key, required this.houseDetail});
  Map houseDetail;

  @override
  State<HouseForm> createState() => _HouseFormState();
}

class _HouseFormState extends State<HouseForm> {
  final Map _formData = {
    'point': '', // 小区信息
    'building': '', // 小区楼栋信息
    'room': '', // 小区房间信息
    'name': '', // 业主姓名
    'gender': 1, // 业主性别0女1男
    'mobile': '', // 业主电话
    'idcardFrontUrl':
        'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', // 身份证正面
    'idcardBackUrl':
        'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', // 身份证背面
  };

  // 定义控制器
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _mobileController = TextEditingController();

  @override
  void initState() {
    super.initState();
    setState(() {
      // 获取数据
      _formData.addAll(widget.houseDetail);
      // 赋值给表单
      _nameController.text = _formData['name'];
      _mobileController.text = _formData['mobile'];
    });
  }

  // 提交表单
  submitForm() async {
    //  1. 校验表单数据
    String name = _nameController.text;
    String mobile = _mobileController.text;
    if (!Validate.validateName(name)) return;
    if (!Validate.validatePhone(mobile)) return;
    if (!Validate.validateIdCardImg(
        _formData['idcardFrontUrl'], _formData['idcardBackUrl'])) return;
    setState(() {
      _formData['name'] = name;
      _formData['mobile'] = mobile + '1';
      // _formData['idcardFrontUrl'] = _formData['idcardFrontUrl'];
      // _formData['idcardBackUrl'] = _formData['idcardBackUrl';
      _formData['idcardFrontUrl'] =
          'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650';
      _formData['idcardBackUrl'] =
          'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650';
    });
// 注意接口参数中并不包含 status 这个参数，这个数据是标识房屋的审核状态的
    if (_formData.containsKey('id')) {
      _formData.remove('status');
    }
    // 2. 提交数据
    try {
      var res = await MyHttp.post('/room', _formData);
      print(jsonEncode(_formData));
      String tag = _formData.containsKey('id') ? '修改' : '添加';
      if (res['code'] != 10000) return ToastUtil.showError('$tag房屋失败!');
      ToastUtil.showSuccess('$tag房屋成功');
      ToastUtil.showSuccess('提交成功');
      Navigator.popUntil(context, (route) {
        print(route.settings.name);
        return route.settings.name == '/';
      });
    } catch (e) {
      ToastUtil.showError('提交失败$e');
      print(e);
    }
  }

  /// 上传图片
  void showBottomSheet(String tag) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
              padding: const EdgeInsets.all(10),
              height: 180,
              child: Column(
                children: [
                  ListTile(
                      leading: const Icon(Icons.camera_alt),
                      title: const Text('拍照'),
                      trailing: const Icon(Icons.arrow_forward_ios_rounded),
                      onTap: () async {
                        // 调用相机
                        ImagePicker picker = ImagePicker();
                        final XFile? photo =
                            await picker.pickImage(source: ImageSource.camera);
                        if (photo != null) {
                          uploadAvatar(tag, photo.path);
                        }
                      }),
                  ListTile(
                      leading: const Icon(Icons.image),
                      title: const Text('相册'),
                      trailing: const Icon(Icons.arrow_forward_ios_rounded),
                      onTap: () async {
                        // 调用相册
                        ImagePicker picker = ImagePicker();
                        final XFile? image =
                            await picker.pickImage(source: ImageSource.gallery);
                        if (image != null) {
                          uploadAvatar(tag, image.path);
                        }
                      })
                ],
              ));
        });
  }

  /// 上传图片
  uploadAvatar(String tag, String imagePath) async {
    try {
      // 1. 包装一个FormData对象
      FormData fd =
          FormData.fromMap({"file": await MultipartFile.fromFile(imagePath)});
      // 2. 调用上传接口
      var res = await MyHttp.post('/upload', fd);
      if (res['code'] != 10000) return ToastUtil.showError('上传图片失败');
      // print(res);
      setState(() {
        _formData[tag] = res['data']['url'];
        ToastUtil.showSuccess('上传图片成功');
      });
    } catch (e) {
      ToastUtil.showError('上传图片失败');
    } finally {
      Navigator.pop(context);
    }
  }

  Widget _buildAddIdcardPhoto(String tag, String info) {
    return GestureDetector(
      onTap: () {
        showBottomSheet(tag);
      },
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(Icons.add, size: 30, color: Color.fromARGB(255, 85, 145, 175)),
            Text(
              info,
              style: TextStyle(color: Color.fromARGB(255, 85, 145, 175)),
            ),
          ]),
    );
  }

  Widget _buildIdcardPhoto(String tag, String photoUrl) {
    return Stack(children: [
      SizedBox(
          width: MediaQuery.of(context).size.width - 20,
          height: 300,
          // 身份证图片
          child: Image.network(photoUrl, fit: BoxFit.contain)),
      // 删除按钮
      Positioned(
          right: 0,
          top: 0,
          child: GestureDetector(
            child: const Icon(Icons.delete, color: Colors.red),
            onTap: () {
              setState(() {
                // 删除图片
                _formData[tag] = '';
              });
            },
          ))
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('${_formData.containsKey('id') ? '编辑' : '添加'}房屋信息'),
          backgroundColor: Colors.transparent,
          centerTitle: true,
        ),
        body: ListView(
            padding: const EdgeInsets.only(top: 10, bottom: 10),
            children: [
              // 房屋信息
              Container(
                padding: const EdgeInsets.all(10),
                child: const Text('房屋信息',
                    style: TextStyle(
                        color: Color.fromARGB(255, 97, 94, 94), fontSize: 16)),
              ),
              Container(
                color: Colors.white,
                padding: const EdgeInsets.only(
                    left: 10, right: 10, top: 15, bottom: 15),
                child: Text(
                    '${_formData['point']}${_formData['building']}${_formData['room']}}'),
              ),
              // 业主信息
              Container(
                padding: const EdgeInsets.all(10),
                child: const Text('业主信息',
                    style: TextStyle(
                        color: Color.fromARGB(255, 97, 94, 94), fontSize: 16)),
              ),
              // 业主姓名
              Container(
                color: Colors.white,
                padding: const EdgeInsets.only(left: 10, right: 10),
                child: TextField(
                  maxLength: 15,
                  controller: _nameController,
                  decoration: const InputDecoration(
                    labelText: '姓名',
                    hintText: '请输入业主姓名',
                    hintStyle: TextStyle(color: Colors.grey),
                    border: InputBorder.none,
                  ),
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(10),
                  ],
                ),
              ),
              // 性别
              Container(
                  color: Colors.white,
                  padding: const EdgeInsets.only(left: 10, right: 10),
                  child: Row(children: [
                    const Text(
                      '性别',
                      style: TextStyle(fontSize: 16),
                    ),
                    const SizedBox(width: 20),
                    Radio(
                      value: 1,
                      groupValue: _formData['gender'],
                      onChanged: (value) {
                        setState(() {
                          _formData['gender'] = value ?? '';
                        });
                      },
                    ),
                    const Text('男'),
                    const SizedBox(width: 10),
                    Radio(
                      value: 0,
                      groupValue: _formData['gender'],
                      onChanged: (value) {
                        setState(() {
                          _formData['gender'] = value ?? '';
                        });
                      },
                    ),
                    const Text('女'),
                  ])),
              // 业主手机号
              Container(
                color: Colors.white,
                padding: const EdgeInsets.only(left: 10, right: 10),
                child: TextField(
                  keyboardType: TextInputType.phone,
                  maxLength: 12,
                  controller: _mobileController,
                  decoration: const InputDecoration(
                    labelText: '手机号',
                    hintText: '请输入您的手机号',
                    hintStyle: TextStyle(color: Colors.grey),
                    border: InputBorder.none,
                  ),
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(10),
                  ],
                ),
              ),
              // 业主信息
              Container(
                padding: const EdgeInsets.all(10),
                child: const Text('本人身份证照片',
                    style: TextStyle(
                        color: Color.fromARGB(255, 97, 94, 94), fontSize: 16)),
              ),
              Container(
                padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
                child: const Text('请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。',
                    style: TextStyle(
                        color: Color.fromARGB(255, 97, 94, 94), fontSize: 12)),
              ),
              // 身份证正面
              Container(
                  color: Colors.white,
                  height: 320,
                  padding: const EdgeInsets.all(10),
                  child: _formData['idcardFrontUrl'] == ''
                      ? _buildAddIdcardPhoto('idcardFrontUrl', '上传人像面照片')
                      : _buildIdcardPhoto(
                          'idcardFrontUrl', _formData['idcardFrontUrl'])),
              const SizedBox(height: 20),
              // 身份证反面
              Container(
                  color: Colors.white,
                  height: 320,
                  padding: const EdgeInsets.all(10),
                  child: _formData['idcardBackUrl'] == ''
                      ? _buildAddIdcardPhoto('idcardBackUrl', '上传国徽面照片')
                      : _buildIdcardPhoto(
                          'idcardBackUrl', _formData['idcardBackUrl'])),
              const SizedBox(height: 20),
              // 提交审核
              Container(
                  padding: const EdgeInsets.all(10),
                  child: ElevatedButton(
                      onPressed: () {
                        //  提交审核
                        submitForm();
                      },
                      child: const Column(
                        children: [
                          SizedBox(height: 8),
                          Icon(Icons.exit_to_app),
                          Text('提交审核'),
                          SizedBox(height: 8)
                        ],
                      ))),
            ]));
  }
}
